<template>
  <div class="container">
    <div class="loginBg">
      <img src="../assets/image/leftBg.png" class="leftImg" />
      <img src="../assets/image/rightBg.png" class="rightImg" />
    </div>
    <div class="loginWrap">
      <div class="logo">云端数据平台</div>
      <div class="loginPanel">
        <div class="title">用户登录</div>
        <div class="inputWrap">
          <i class="if-font-UserOutlined"></i>
          <el-input placeholder="请输入用户名称" v-model="account" class="input" @blur="validateAccount"
            @input="inputValidate.accTip = ''" @keydown.enter="login" />
        </div>
        <div class="tip">{{ inputValidate.accTip }}</div>
        <div class="inputWrap">
          <i class="if-font-LockOutlined"></i>
          <el-input type="password" placeholder="请输入登录密码" v-model="pwd" class="input" show-password @blur="validatePwd"
            @input="inputValidate.pwdTip = ''" @keydown.enter="login" />
        </div>
        <div class="tip">{{ inputValidate.pwdTip }}</div>
        <label :class="['saveStatus', { active: rememberMe }]" @click="onRememberMe">
          <span class="virtualCheckbox"></span>记住我
        </label>
        <div class="loginBtn" @click="login">登录</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";

import { doLogin } from "@/utils/requests.js";

import { storage } from '@/utils/storage.js';

import { useRouter } from "vue-router";

import { ElMessage } from "element-plus";
 
import { de } from "element-plus/es/locales.mjs";


const router = useRouter();

let rememberMe = ref(false);

let account = ref("");
let pwd = ref("");

let inputValidate = ref({
  accTip: "",
  pwdTip: "",
});

onMounted(() => {
  account.value = storage.get("be-account");
  rememberMe.value = storage.get("be-rememberMe");
});

const validateAccount = () => {
  if (!account.value.length) {
    inputValidate.value.accTip = "请输入登录账号";
  } else if (account.value.length < 5 || account.value.length > 20) {
    inputValidate.value.accTip = "用户名长度需要在5到20个字符";
  }
};

const validatePwd = () => {
  if (!pwd.value.length) {
    inputValidate.value.pwdTip = "请输入密码";
  }
};

const onRememberMe = () => {
  rememberMe.value = !rememberMe.value;
 
  if (rememberMe.value) {
    if (account.value.length) {
      storage.set("be-account", account.value);

      storage.addIgnoreKey("be-account");
    }
  } else {
    storage.remove("be-account");
  }
  storage.set("be-rememberMe", rememberMe.value);
};

watch(
  () => account.value,
  (val) => {
    if (val) {
      if (rememberMe.value) {
        storage.set("be-account", val);
      } else {
        storage.remove("be-account");
      }
    }
  }
);

const login = () => {
  doLogin({
    account: account.value,
    passwd: pwd.value,
  }).then((data) => {
    if (data) {

      var right = (data.rights || [])[0];


      storage.set("be-account", account.value);
      storage.set("be-user", data.userName);
      storage.set("be-unitName", data.unitName);
      storage.set("be-roleCodes", data.roleCodes);
      storage.set("be-token", data.token);
      storage.set("be-rights", right);

      storage.set("be-menus", right.menus || []);
 
      var path = (right.menus || []).length
        ? right.menus[0].path ||
        (right.menus[0].sub ? right.menus[0].sub[0].path : "")
        : "";

      //跳转
      if (path) {
        router.push(path);
      } else {
        ElMessage({
          message: "该用户没有菜单权限",
          type: "warning",
          grouping: true,
          duration: 1000,
        });
      }
    }
  });
};
</script>

<style scoped lang="scss">
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #0c1431 url("../assets/image/bg.png") center bottom;
  background-size: cover;

  * {
    box-sizing: border-box;
  }

  .loginBg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    .leftImg {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      height: 100%;
    }

    .rightImg {
      position: absolute;
      right: 5%;
      top: 0;
      bottom: 0;
      height: 100%;
      opacity: 0.2;
    }
  }

  .loginWrap {
    position: absolute;
    width: 45%;
    right: 5%;
    bottom: 26%;

    .logo {
      width: 680px;
      margin: 0 auto;
      text-align: center;
      letter-spacing: 6px;
      margin-bottom: 20px;
      background: linear-gradient(to right, #00a0f1, #00e8d0);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      height: 120px;
      line-height: 120px;
      font-size: 48px;
    }

    .loginPanel {
      height: 440px;
      width: 635px;
      padding: 40px 56px;
      margin: 0 auto;
      background: url("../assets/image/panel.png");

      .title {
        font-size: 32px;
        height: 48px;
        margin-bottom: 30px;
        line-height: 48px;
        letter-spacing: 7px;
        color: #00bff4;
        font-weight: lighter;
        text-align: center;
      }

      .inputWrap {
        position: relative;
        height: 56px;

        .input {
          background: transparent;
          width: 100%;
          height: 56px;
          outline: none;

          :deep(.el-input__wrapper) {
            background: transparent;
            box-shadow: none;
            padding-left: 60px;
            border: solid 3px #1970b3;

            &.is-focus {
              border-color: #1fa3f5;
            }

            input {
              line-height: 56px;
              color: #fff;
              font-size: 16px;
              letter-spacing: 2px;

              &::placeholder {
                color: #fff;
                letter-spacing: 2px;
                opacity: 0.6;
              }
            }

            .el-input__password {
              font-size: 24px;
              color: #1fa3f5;
            }
          }
        }

        i {
          position: absolute;
          font-size: 28px;
          color: #1fa3f5;
          left: 22px;
          top: 14px;
        }
      }

      .tip {
        line-height: 24px;
        height: 24px;
        color: #f56c6c;
        text-align: right;
      }

      .saveStatus {
        margin: 0 0 15px 0;
        height: 30px;
        display: inline-flex;
        align-items: center;
        color: #1fa3f5;
        font-size: 16px;
        cursor: pointer;

        .virtualCheckbox {
          position: relative;
          margin-right: 5px;
          width: 24px;
          height: 24px;
          display: inline-block;
          border: solid 3px #1970b3;
        }

        &.active {
          .virtualCheckbox {
            &:after {
              box-sizing: content-box;
              content: "";
              border: 3px solid #1970b3;
              border-left: 0;
              border-top: 0;
              height: 10px;
              left: 5px;
              position: absolute;
              top: 1px;
              transform: rotate(45deg);
              width: 6px;
            }
          }
        }
      }

      .loginBtn {
        height: 57px;
        border-radius: 3px;
        background-color: #20a3f5;
        cursor: pointer;
        font-size: 28px;
        letter-spacing: 7px;
        padding-left: 7px;
        text-align: center;
        line-height: 57px;
        color: #fff;
        font-weight: lighter;

        &:hover {
          background: #3eb1f8;
        }
      }
    }
  }
}

@media screen and (max-width: 1368px) {
  .loginWrap {
    transform: scale(0.75);
    transform-origin: left bottom;
  }
}
</style>
